<template>
  <div>
    <!-- 筛选条件 -->
    <v-page-search>
      <el-form :inline="true"
               :model="searchForm">
        <el-form-item>
          <el-date-picker v-model.trim="searchForm.year"
                          type="year"
                          clearable
                          @change.passive="onClick"
                          placeholder="选择年份">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.territory"
                     style="width: 170px"
                     @change.passive="onClick"
                     placeholder="责任区域">
            <el-option v-for="item in options.territory"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="search-but">
        <el-button size="small"
                   type="primary"
                   icon="el-icon-search"
                   @click="onClick">搜索</el-button>
        <el-button size="small"
                   type="info"
                   icon="el-icon-delete"
                   @click="clearCondition">清除</el-button>
      </div>
    </v-page-search>
    <el-tabs v-model="activeName"
             type="card">
      <el-tab-pane label="逐月情况"
                   name="distribution">
        <transition name="slide-fade"
                    mode="out-in">
          <echars-distr :search-form="searchForm"
                        :active-name="activeName"
                        ref="distribution"
                        v-if="show"></echars-distr>
        </transition>
      </el-tab-pane>
      <el-tab-pane label="成熟度分布"
                   name="maturity">
        <transition name="slide-fade"
                    mode="out-in">
          <echars-maturity :search-form="searchForm"
                           :active-name="activeName"
                           ref="maturity"
                           v-if="show"></echars-maturity>
        </transition>
      </el-tab-pane>
      <el-tab-pane label="分组分布"
                   name="territory">
        <transition name="slide-fade"
                    mode="out-in">
          <echars-territory :search-form="searchForm"
                            :active-name="activeName"
                            ref="territory"
                            v-if="show"></echars-territory>
        </transition>
      </el-tab-pane>
      <el-tab-pane label="逐月签订类型分布"
                   name="typeStats">
        <transition name="slide-fade"
                    mode="out-in">
          <type-by-month-table :search-form="searchForm"
                               :active-name="activeName"
                               ref="typeStats"
                               v-if="show"></type-by-month-table>
        </transition>
      </el-tab-pane>
      <el-tab-pane label="逐月主跟分布"
                   name="areaStats">
        <transition name="slide-fade"
                    mode="out-in">
          <area-by-month-table :search-form="searchForm"
                               :active-name="activeName"
                               ref="areaStats"
                               v-if="show"></area-by-month-table>
        </transition>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Moment from 'moment'
import EcharsDistr from './stats/distribution'
import EcharsMaturity from './stats/maturity-stats'
import EcharsTerritory from './stats/territory-stats'
import TypeByMonthTable from './stats/type-by-month-table.1'
import AreaByMonthTable from './stats/area-by-month-table.1'
export default {
  data() {
    return {
      show: true,
      activeName: 'distribution',
      searchForm: {
        year: '',
        territory: ''
      },
      options: {
        territory: []
      }
    }
  },
  computed: {
    ...mapGetters([
      'appEnum',
      'userInfo'
    ])
  },
  mounted() {
    this.initEnum()
  },
  methods: {
    // 请求数据
    onClick() {
      if (this.searchForm.year !== '' && this.searchForm.year !== null) this.searchForm.year = Moment(this.searchForm.year).format('YYYY')

      if (this.activeName === 'distribution') {
        this.$refs.distribution.getData()
      } else if (this.activeName === 'maturity') {
        this.$refs.maturity.getData()
      } else if (this.activeName === 'typeStats') {
        this.$refs.typeStats.getTableData()
      } else if (this.activeName === 'areaStats') {
        this.$refs.areaStats.getTableData()
      } else {
        this.$refs.territory.getData()
      }
    },
    // 清除筛选
    clearCondition() {
      this.searchForm.year = ''
      this.searchForm.territory = ''
      this.onClick()
    },
    // 初始化下拉菜单
    initEnum() {
      this.options.territory = this.appEnum.territory
      // 默认筛选参数，如果用户属于服务组，默认选中用户所在区域的数据
      if (this.userInfo.department.indexOf('服务') !== -1) this.searchForm.territory = this.userInfo.department
    }
  },
  components: {
    EcharsDistr,
    EcharsTerritory,
    EcharsMaturity,
    TypeByMonthTable,
    AreaByMonthTable
  }
}
</script>

<style lang="scss">
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>
